<template>
	<view>
		<u-popup :show="show"  mode="bottom" :closeable="true" :round="10" @close="close">
		   <view class="popDialog">
		      <view class="font-32 text-bold title">选择对比档案</view>
			  <scroll-view scroll-y="true" style="height: 700rpx;">
			  	<view class="records-container">
			  	  <view class="record-item" v-for="(item, index) in records" :key="index">
			  		<view class="record-line">
			  		  <view class="record-dot iconfont">&#xe6c7;</view>
			  		  <view class="record-content-wrapper">
			  			<view class="record-header">
			  			  <text class="update-time">档案更新于：2025-4-26 12:03:23</text>
			  			</view>
			  			<view class="record-content">
			  			  <view class="info-row">
			  				<view class="font-24 flex-1 flex-y-baseline">
			  					<text class="c-77 m-r-24">身高</text>170cm
			  				</view>
			  				<view class="font-24 flex-1 flex-y-baseline">
			  					<text class="c-77 m-r-24">体重</text>60kg
			  				</view>
			  			  </view>
			  			  <view class="info-row">
			  				<view class="font-24 flex-1 flex-y-baseline">
			  					<text class="c-77 m-r-24">血压</text>90mmHg
			  				</view>
			  				<view class="font-24 flex-1 flex-y-baseline">
			  					<text class="c-77 m-r-24">心率</text>75次/分钟
			  				</view>
			  			  </view>
			  			</view>
			  		  </view>
			  		</view>
			  	  </view>
			  	</view>
			  </scroll-view>
			  
			
			  
			  <view style="height: 120rpx;"></view>
		      <view class="footer fixfooter">
		      	<view class="submit" @click="$util.redirectTo('/otherpages/health/comparison')">开启对比</view>
		      </view>
			  
		   </view>
		 </u-popup>
	</view>
</template>

<script>
	export default {
		name:"fileComparison",
		props: {
		  show: {
		    type: Boolean,
		    default: false
		  }
		},
		data() {
			return {
				records: [
					// 这里模拟多条记录，实际可从接口获取
					{
					  height: '170cm',
					  weight: '60kg',
					  bloodPressure: '90mmHg',
					  heartRate: '75次/分钟'
					},
					{
					  height: '170cm',
					  weight: '60kg',
					  bloodPressure: '90mmHg',
					  heartRate: '75次/分钟'
					},
					{
					  height: '170cm',
					  weight: '60kg',
					  bloodPressure: '90mmHg',
					  heartRate: '75次/分钟'
					}
				],
			};
		},
		methods: {
		  close() {
		    this.$emit("close")
		  },
		 
		}
	}
</script>

<style lang="scss" scoped>
.popDialog {
  width: 100%;
  padding: 40rpx 0;
  border-radius: 20rpx 20rpx 0 0;
  box-sizing: border-box;
  background: #fff;
  .title {
    text-align: center;
    padding-bottom: 38rpx;
  }
  
}

.records-container {
  margin: 0 24rpx 0 72rpx;
  position: relative;
  .record-line {
    display: flex;
    position: relative;
  }
  .record-dot {
    // width: 10px;
    // height: 10px;
    // border-radius: 50%;
    // background-color: #07c160;
	color: $color-title2;
    position: absolute;
    left: -60rpx;
    top: 4rpx;
    z-index: 2;
  }
  .record-dot::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 240rpx;
    background-color: #e7e8eb;
    top: 23px;
    left: 8px;
    z-index: 1;
  }
  // .record-item:last-child .record-dot::after {
  //   display: none;
  // }
  
  .record-item {
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
	.record-content-wrapper {
	  flex: 1;
	}
  }
  .record-header {
    margin-bottom: 5px;
	.update-time {
	  font-size: 14px;
	  color: #666;
	}
  }
  
  .record-content {
    display: flex;
    flex-direction: column;
    background: #F7F7F7;
    padding: 30rpx 40rpx;
    border-radius: 20rpx;
	border-left: 2px solid $color-title2;
	.info-row {
	  display: flex;
	  margin-bottom: 5px;
	}
  }
  
  
}

.footer2 {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 0 24rpx;
	 box-sizing: border-box;
	 .submit {
	   width: 265rpx;
	   height: 86rpx;
	   line-height: 86rpx;
	   text-align: center;
	   background-color: $color-title2;
	   color: #fff;
	   border-radius: 40rpx;
	 }
}
</style>